window.addEventListener('load', () => {
  // 测试样式列表
  let styleList = [
    {
      color: '#d9534f',
      fontSize: '14px',
      fontWeight: 'bold'
    },
    {
      color: 'red',
      fontSize: '14px',
      fontWeight: '400'
    },
    {
      color: '#d8d94f',
      fontSize: '14px',
      fontWeight: 'bold'
    },
    {
      color: '#ffffff',
      fontSize: '16px',
      fontWeight: '400'
    },
    {
      color: '#ffffff',
      fontSize: '14px',
      fontWeight: '400'
    },
    {
      color: '#0026ff',
      fontSize: '15px',
      fontWeight: 'bolder'
    }
  ]

  // 测试消息列表
  let messageList = [
    '为按钮添加不同的颜色',
    '（警告）Warning',
    '带有预定义样式的按钮',
    '尺寸',
    '.btn-block',
    '并通过编程的方式使其处于激活状态',
    '因此无需额外添加'
  ]

  // 弹幕类实例化
  let bulletChat = new BulletChat({
    el: '#root',
    direction: {
      from: 'right',
      to: 'left'
    },
    displayArea: 0.25,
    entryEdge: 'top'
  })

  // 弹幕设置
  let barrageSetting = document.querySelector('#barrageSetting')
  let barrageSettingBtn = barrageSetting.querySelector('button')
  let barrageSettingMenu = barrageSetting.querySelector('.dropdown-menu')
  barrageSetting.onclick = (ev) => {
    let oEvent = ev || event;
    oEvent.cancelBubble = true
    oEvent.stopPropagation()
  }
  barrageSettingBtn.addEventListener('click', () => {
    barrageSettingMenu.style.display = 'block'
  })
  document.addEventListener('click', () => {
    barrageSettingMenu.style.display = 'none'
  })
  // 弹幕设置（区域）
  let displayArea = document.querySelector('#displayArea')
  let displayAreaList = [0.25, 0.5, 0.75, 1]
  let displayAreaIndex = '0'
  displayArea.addEventListener('click', (e) => {
    let index = e.target.dataset.index
    if (index && displayAreaIndex !== index) {
      displayAreaIndex = index
      bulletChat.displayArea = displayAreaList[Number(index)]
      bulletChat.countRows()
    }
  })
  // 弹幕设置（轨迹）
  let trajectory = document.querySelector('#trajectory')
  let trajectoryList = [{from: 'right', to: 'left'}, {from: 'left', to: 'right'}]
  let trajectoryIndex = '0'
  trajectory.addEventListener('click', (e) => {
    let index = e.target.dataset.index
    if (index && trajectoryIndex !== index) {
      trajectoryIndex = index
      bulletChat.direction = trajectoryList[Number(index)]
      bulletChat.refactoringPanel()
    }
  })
  // 弹幕设置（靠顶靠底）
  let entryEdge = document.querySelector('#entryEdge')
  let entryEdgeList = ['top', 'bottom']
  let entryEdgeIndex = '0'
  entryEdge.addEventListener('click', (e) => {
    let index = e.target.dataset.index
    if (index && entryEdgeIndex !== index) {
      entryEdgeIndex = index
      bulletChat.entryEdge = entryEdgeList[Number(index)]
      bulletChat.refactoringPanel()
    }
  })
  // 一些事件绑定
  let input = document.querySelector('#input')
  let play = document.querySelector('#play')
  let pause = document.querySelector('#pause')
  let add = document.querySelector('#add')
  play.addEventListener('click', () => {
    bulletChat.play()
  })
  pause.addEventListener('click', () => {
    bulletChat.pause()
  })
  add.addEventListener('click', () => {
    let text = input.value.trim()
    if (text) {
      distributeMessage({ text })
      input.value = ''
    }
  })

  // 自动分发消息
  let automatic = document.querySelector('#automatic')
  let automaticTimer = null
  automatic.addEventListener('click', () => {
    if (automaticTimer) {
      clearInterval(automaticTimer)
      automaticTimer = null
      return
    }
    automaticTimer = setInterval(() => distributeMessage(), 120)
    setTimeout(() => {
      clearInterval(automaticTimer)
      automaticTimer = null
    }, 20000)
  })

  // 分发消息具体实现
  function distributeMessage(arg = {}) {
    let random_1 = Math.floor(Math.random() * 7)
    let random_2 = Math.floor(Math.random() * 6)
    bulletChat.add({
      text: arg.text || messageList[random_1],
      style: arg.style || styleList[random_2]
    })
  }
})